<template>
  <div class="win">
    <!-- 顶部切换 -->
    <div class="top_bar_space"></div>
    <div class="top_bar">
      <div
        class="item"
        @click="greenShow(index)"
        :class="current==index?'green':''"
        v-for="(item, index) in barList"
        :key="index"
      >
        <p>{{item}}</p>
      </div>
    </div>
    <!-- 质保中 -->
    <div class="warranty_data_box">
      <div class="warranty" v-for="(item, index) in warrantyData" :key="index">
        <div class="top_row">
          <p>{{item.store_name}}</p>
          <p>质保{{item.warr_time}}天</p>
        </div>
        <div class="goods_box">
          <img :src="item.image" />
          <div class="right_col_box">
            <p class="name ellipsis2">{{item.device_name}}</p>
            <div class="time">
              <p>安装日期：{{item.create_time}}</p>
              <p class="time_bottom">截止日期：{{item.end_time}}</p>
            </div>
          </div>
        </div>
        <p v-if="current==1" class="red_word">已过保</p>
      </div>
    </div>

    <noData v-if="warrantyData==''"></noData>
    <!-- 已过保 -->
    <i-toast id="toast" />
  </div>
</template>

<script>
import noData from "@/components/noData";
export default {
  data() {
    return {
      bjurl: "",
      barList: ["质保中", "已过保"],
      current: 0, //切换，0是质保中,1是已过保
      warrantyData: [] //质保中/已过保的数据
    };
  },
  methods: {
    //请求接口我的质保单列表
    getWarrantyData() {
      this.$ajax("/home/warranty/warr_index", "post", {
        mark: this.current
      })
        .then(res => {
          
          if (res.status) {
            this.warrantyData = res.data;
          } else {
            this.warrantyData = "";
          }
        })
        .catch(err => {});
    },
    //顶部切换按钮
    greenShow(index) {
      if (this.current == index) return;
      else {
        this.current = index;
        this.getWarrantyData();
      }
    }
  },
  components: {
    noData
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.barList = this.barList;
    this.current = this.current;
    this.getWarrantyData();
  }
};
</script>

<style lang="scss" scoped>
.win {
  .top_bar {
    z-index: 6;
    width: 750rpx;
    height: 88rpx;
    background-color: #ffffff;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: -1rpx 7rpx 8rpx 0rpx rgba(169, 169, 169, 0.14);
    .item {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #4d4d4d;
      border-bottom: 4rpx solid #ffffff;
    }
    .green {
      color: $green;
      border-bottom: 4rpx solid $green;
    }
  }
  .top_bar_space {
    height: 88rpx;
  }
  .warranty_data_box {
    padding-bottom: 20rpx;
    .warranty {
      position: relative;
      margin-top: 20rpx;
      width: 750rpx;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      box-shadow: -1rpx 7rpx 8rpx 0rpx rgba(169, 169, 169, 0.14);
      .top_row {
        display: flex;
        justify-content: space-between;
        color: $green;
        font-size: 24rpx;
        margin-bottom: 22rpx;
      }
      .goods_box {
        display: flex;
        img {
          width: 198rpx;
          height: 198rpx;
          border-radius: 10rpx;
        }
        .right_col_box {
          padding: 10rpx 0 10rpx 30rpx;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            line-height: 1.2;
            width: 400rpx;
            font-size: 30rpx;
            color: #000000;
          }
          .time {
            color: #4d4d4d;
            font-size: 24rpx;
            .time_bottom {
              margin-top: 30rpx;
            }
          }
        }
      }
      .red_word {
        font-size: 24rpx;
        color: $red;
        position: absolute;
        right: 30rpx;
        bottom: 22rpx;
      }
    }
  }
}
</style>
